<template>
    <div class="center">
        <div class="box">
            <h2>优购街后台管理平台</h2>
            <el-input placeholder="请输入用户名" v-model="username"></el-input>
            <el-input placeholder="请输入密码" v-model="pwd" type="password"></el-input>
            <el-checkbox>记住密码</el-checkbox>
            <el-button style="background-color:#1e64c3; color: #fff;" @click="toligin">登录</el-button>
        </div>
    </div>
   
 </template>
 <script setup>
    //  import axios from "axios"
     import { ElMessage } from 'element-plus';
     import { reactive,ref,} from 'vue';
     import { useRouter } from 'vue-router';
     import {Login} from "@/api/index"

     var router=useRouter();
    //  var axios=getCurrentInstance();
     var username=ref("");
     var pwd=ref("");

     async function toligin(){
            var data={
                 account:username.value,
                 password:pwd.value,
            }
            let res = await Login(data);
            console.log("组件",res);
            ElMessage.success("登录成功");
            sessionStorage.setItem("token",res.token);
            sessionStorage.setItem("adminId",res.admin.adminId);
            router.push({path:"/"});
         }
 </script>
 <style scoped>
     *{
         margin: 0;
         padding: 0;
     }
     .center{
         width: 100%;
         height:100%;
     }
     .box{
         width: 25%;
         height:300px;
         background-color: #ffffff81;
         border-radius:10px;
         text-align: center;
         margin: 0 auto;
     }
     h2{
         width:68%;
         height: 80px;
         margin: 0 auto;
         line-height: 80px;
     }
     .el-input{
         width: 70%;
         height: 30px;
         margin-bottom:10%;
     }
     .el-checkbox{
         display:block;
         margin-left: 50%;
         height:22px;
         font-size: 12px;
     }
     :deep(.el-checkbox__inner ){
         border:1px solid #000;
         background-color: rgba(255,255,255,0);
     }
     .el-button{
         display:block;
         width: 70%;
         height: 30px;
         margin:0 auto;
     }
    :deep(.el-input__wrapper){
     background-color: rgba(255,255,255,0);
    }
    :deep(.el-button[data-v-d0e06bca]){
     border: none;
    }
 </style>
 